<template>
	<view class="index-main">
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap"></swiper-tab-head>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in wdyfslist" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="items.list.length>0">
							<view class="wdyf-order">
								
								<block v-for="(item,index1) in items.list" :key="index1">
									<view class="wdyf-list" v-show="item.type==1" hover-class="wdyf-atv" @tap="onWdyfTap(item.id)">
										<view class="imgbxo">
											<view class="imgbxonr">
												<image :src="item.headimgurl" mode="widthFix" lazy-load></image>
											</view>
										</view>
										<view class="wdyf-nr">
											<view class="">{{item.ysname}}<text>{{item.qr}}</text></view>
											<view class="">临床诊断：<text>{{item.lczd}}</text></view>
											<view class="">开方时间：<text>{{item.time}}</text></view>
										</view>
										<view class="icon iconfont iconenter"></view>
									</view>
									
									<view v-show="item.type==2" class="order-item">
										<view class="i-top b-b">
											<text class="time">{{item.cname}}</text>
											<text class="state">{{item.qr}}</text>
										</view>
										<block v-for="(itemx,index2) in item.info" :key="index2">
											<view class="goods-box-single" @tap="onOrder(item.id)">
												<image class="goods-img" :src="itemx.img" mode="aspectFill"></image>
												<view class="right">
													<text class="title clamp">{{itemx.title}}</text>
													<text class="attr-box">{{itemx.price}} x {{itemx.sum}}</text>
													<text class="price">{{itemx.sum*itemx.price}}</text>
												</view>
											</view>
									    </block>
										<view class="u-f u-f-ac u-f-jsb price-box">
											<view class="xxmbo">
												<text class="num">快递费￥{{item.kdf?item.kdf:0}}</text>
												<text class="num">优惠￥{{item.money?item.money:0}}</text>
											</view>
											<view class="">
												实付款<text class="price">{{item.price}}</text>
											</view>
										</view>
										<view class="action-box b-t" v-if="item.qrs == 2">
											<button class="action-btn" @click="cancelOrder(item.id)">取消订单</button>
											<button class="action-btn recom" @click="zfOrder(item.id,item.price)">立即支付</button>
										</view>
									</view>
									
								</block>
							</view>
							<!-- 上加加载 -->
							<load-mmore :loadtext="items.loadtext"></load-mmore>
						</template>
						<template v-else>
							<!-- 无内容默认 -->
							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import swiperTabHead from "components/user/swiper-tab-head.vue";
	import loadMmore from "components/common/load-more.vue";
	import noThing from "components/common/no-thing.vue"
	export default {
		components: {
			swiperTabHead,
			loadMmore,
			noThing
		},
		data() {
			return {
				swiperheight: 500,
				tabIndex: 0,
				listid:0,
				ims:this.config.webUrl,
				last_id:1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				tabBars: [{
						name: "待提交",
						id: "all"
					},
					{
						name: "审核中",
						id: "dzf"
					},
					{
						name: "已通过",
						id: "yzf"
					},
					{
						name: "未通过",
						id: "wl"
					},
					{
						name: "复审举报",
						id: "fs"
					},
				],
				wdyfslist: [
					{
						loadtext: "上拉加载更多",
						list: [],
					},
					{
						loadtext: "上拉加载更多",
						list: [],
					},
					{
						loadtext: "上拉加载更多",
						list: [],
					},
					{
						loadtext: "上拉加载更多",
						list: [],
					}
					
				]

			}
		},
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search'
			});
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperheight = height;
				}
			});
		},
		onShow() {
			this.getList();
		},
		methods: {
			zfOrder(id,price){
				uni.navigateTo({
					url:`/pages/payment/payment?id=${id}&ghf=${price}&tp=4`,
				})
			},
			onOrder(id){
				uni.navigateTo({
					url:`/pages/order/createOrder?id=${id}`
				})
			},
			cancelOrder(id){
				uni.showModal({
					content: '是否确认取消订单',
					success: (e) => {
						if (e.confirm) {
							this.deleOrder(id)
						}
					}
				})
			},
			async deleOrder(id) {
				var data={
					id:id,
				};
				let [err,res] = await this.$http.post('/apip/order/dell',data,{token:true});
				if (!this.$http.errorCheck(err,res)) return;
				//console.log(res.data)
				if(res.data.code === 1){
					let wdyfslist = this.wdyfslist
					wdyfslist.forEach(item => {
						item.list.some((items,i) => {
							if(items.id ==id){
								item.list.splice(i,1)
								return true;
							}
							
						});
					})
				}
			},
			getList() {
				let data = {
					//column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
				};
				if (this.last_id>1) {
					data.page = this.last_id;
				}
				data.limit = 10;
				var listid = this.tabIndex
				if(listid==0){data.if = 0;}
				if(listid==1){data.if = 2;}
				if(listid==2){data.if = 1;}
				if(listid==3){data.if = 4;}
				data.token = uni.getStorageSync("userInfo").token;
				data.uid = uni.getStorageSync("userInfo").id;
				uni.request({
					url: this.config.webUrl+'/apip/prescribing/ykyf',
					data: data,
					success: data => {
						if (data.data.code==1) {
							
							let list = data.data.data.info;
	
								var newItems=[];
								for (var i = 0; i < list.length; i++) {
									if(list[i].headimgurl){
										var str=list[i].headimgurl;
										if(str.indexOf("http") != -1){
											list[i].headimgurl = str;
										}else{
											list[i].headimgurl=this.config.imgUrl+str;
										}
									}else{
										list[i].headimgurl='';
									}
									//1: "已支付", 2: "待支付", 3: "已发货", 4: "已完成", 5: "免单", 6: "线下付", 11: "异常单", 12
									list[i].qrs=list[i].qr
									if(list[i].qr){
										list[i].qr=data.data.data.zt[list[i].qr]?data.data.data.zt[list[i].qr]:'';
									}else{
										list[i].qr='';
									}
									
									
								}
							this.wdyfslist[listid].list = this.reload ? list : this.wdyfslist[listid].list.concat(list);
							//console.log(list.length)
							this.reload = false;
							this.last_id = this.last_id+1;
							if(data.data.countpage<this.last_id){
								this.wdyfslist[listid].loadtext="没有更多数据了";
							}else{
								this.wdyfslist[listid].loadtext="上拉加载更多";
							}
						}else{
							this.$api.msg(data.data.msg);
						}
					},
					fail: (data, code) => {
						//console.log('fail' + JSON.stringify(data));
					}
				});
			},
			//上拉加载
			loadmore(index) {
				if (this.wdyfslist[index].loadtext != "上拉加载更多") {
					return;
				}
				//修改状态
				this.wdyfslist[index].loadtext = "加载中...";
				//获取数据
				this.getList()
				//this.wdyfslist[index].loadtext="没有更多数据了";
			},
			// tabbar点击事件
			tabtap(index) {
				this.tabIndex = index
			},
			// 滑动事件
			tabChange(e) {
				this.tabIndex = e.detail.current;
				this.wdyfslist[e.detail.current].list = [];
				this.last_id=1;
				this.getList();
			},
			onWdyfTap(id){
				uni.navigateTo({
					url:`/pages/user/wdyf/wdyfnr/wdyfnr?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #f9f9f9;
}
.xxmbo text{
	color: #999!important;
}
.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: $base-color;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;

			.goods-img {
				display: block;
				width: 170upx;
				height: 170upx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}

		.price-box {
			padding: 20upx 30upx;
			padding-left: 0;
			padding-top: 0upx;
			box-sizing: border-box;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.num {
				margin: 0 8upx;
				color: $font-color-dark;
			}

			.price {
				font-size: $font-lg;
				color: $font-color-dark;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}

		.action-btn {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}


/* 优惠券列表 */
	.coupon-item{
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;
		.con{
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;
			&:after{
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}
		.title{
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.time{
			font-size: 24upx;
			color: $font-color-light;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content:flex-end;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}
		.price{
			font-size: 40upx;
			color:#f17503;
			&:before{
				content: '￥';
				font-size: 28upx;
			}
		}
		.tips{
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}
		.circle{
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;
			&.r{
				left: auto;
				right: -6upx;
			}
		}
	}
.wdyf-list{
	position: relative;
	width: 100%;
	margin: 20upx auto;
	padding: 20upx 0;
	border-radius: 6upx;
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}
.wdyf-atv{
	background: #fafafa;
}
.wdyf-list .iconenter{
	font-size: 40upx;
	color: #999;
	position: absolute;
	top: 50%;
	right: 4upx;
	margin-top: -34upx;
	color: #ccc;
}
.wdyf-list .imgbxo{
	position: absolute;
	top: 34upx;
	left: 14upx;
	width: 150upx;
	height: 150upx;
	border-radius: 6upx;
	overflow: hidden;
}
.imgbxonr{
	position: relative;
}
.imgbxonr text{
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	height: 30px;
	line-height: 24px;
	font-size: 24upx;
	letter-spacing: 1upx;
	text-align: center;
	color: #fafafa;
	background: rgba(0,0,0,0.3);
}
.wdyf-list .imgbxo image{
	width: 100%;
	height: 100%;
}
.wdyf-nr{
	padding-left: 190upx;
	padding-right: 60upx;
}
.wdyf-nr>view:nth-child(1){
	font-size: 32upx;
	font-weight: bold;
	line-height: 36px;
}
.wdyf-nr>view:nth-child(1) text{
	margin-left: 16upx;
	font-size: 28upx;
	font-weight: normal;
	background: #FF4443;
	color: #fafafa;
	padding: 0upx 10upx;
	border-radius: 6upx;
}
.wdyf-nr>view:nth-child(2){
	font-size: 28upx;
	color: #666;
	line-height: 24px;
	text-align: justify;
	text-align-last: left;
	overflow:hidden; 
	text-overflow:ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:1; 
}
.wdyf-nr>view:nth-child(2) text{
	font-size: 28upx;
	color: #999;
	
}
.wdyf-nr>view:nth-child(3){
	font-size: 28upx;
	color: #666;
	line-height: 24px;
	text-align: justify;
	text-align-last: left;
	overflow:hidden; 
	text-overflow:ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:1; 
}
.wdyf-nr>view:nth-child(3) text{
	font-size: 28upx;
	color: #999;
	
}
</style>
